<template>
  <div class="result-container" :class="[`result-${type}`]">
    <div class="result-header">
      <div class="result-title">
        <slot name="title">
          <span>{{ title }}</span>
        </slot>
      </div>
      <div class="result-status">
        <slot name="status">
          <el-tag :type="tagType">{{ statusText }}</el-tag>
        </slot>
      </div>
    </div>
    
    <div class="result-content">
      <slot>
        <div v-if="items.length > 0" class="result-items">
          <div v-for="(item, index) in items" :key="index" class="result-item">
            <div class="result-label">{{ item.label }}</div>
            <div class="result-value">{{ item.value }}</div>
          </div>
        </div>
        <div v-else class="result-empty">
          <slot name="empty">
            <span>暂无数据</span>
          </slot>
        </div>
      </slot>
    </div>
    
    <div v-if="$slots.footer" class="result-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '结果'
  },
  status: {
    type: String,
    default: 'success'
  },
  type: {
    type: String,
    default: 'default',
    validator: (value) => ['default', 'info', 'success', 'warning', 'error'].includes(value)
  },
  items: {
    type: Array,
    default: () => []
  }
})

const tagType = computed(() => {
  switch (props.type) {
    case 'success':
      return 'success'
    case 'warning':
      return 'warning'
    case 'error':
      return 'danger'
    case 'info':
      return 'info'
    default:
      return ''
  }
})

const statusText = computed(() => {
  switch (props.status) {
    case 'success':
      return '成功'
    case 'warning':
      return '警告'
    case 'error':
      return '错误'
    case 'info':
      return '信息'
    default:
      return props.status
  }
})
</script>

<style lang="scss" scoped>
.result-container {
  background-color: var(--el-fill-color-lighter);
  border-radius: var(--el-border-radius-base);
  padding: 20px;
  margin-bottom: 20px;
  
  &.result-success {
    background-color: var(--el-color-success-light-9);
    border-left: 4px solid var(--el-color-success);
  }
  
  &.result-warning {
    background-color: var(--el-color-warning-light-9);
    border-left: 4px solid var(--el-color-warning);
  }
  
  &.result-error {
    background-color: var(--el-color-danger-light-9);
    border-left: 4px solid var(--el-color-danger);
  }
  
  &.result-info {
    background-color: var(--el-color-info-light-9);
    border-left: 4px solid var(--el-color-info);
  }
  
  .result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .result-title {
      font-size: 16px;
      font-weight: bold;
      color: var(--el-text-color-primary);
    }
  }
  
  .result-content {
    .result-items {
      .result-item {
        margin-bottom: 12px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .result-label {
          font-size: 14px;
          color: var(--el-text-color-regular);
          margin-bottom: 4px;
        }
        
        .result-value {
          font-size: 14px;
          color: var(--el-text-color-primary);
          word-break: break-word;
          white-space: pre-wrap;
          line-height: 1.5;
        }
      }
    }
    
    .result-empty {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px 0;
      color: var(--el-text-color-placeholder);
    }
  }
  
  .result-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--el-border-color-lighter);
  }
}

// 暗黑模式适配
html.dark {
  .result-container {
    &.result-success {
      background-color: var(--el-fill-color-dark);
    }
    
    &.result-warning {
      background-color: var(--el-fill-color-dark);
    }
    
    &.result-error {
      background-color: var(--el-fill-color-dark);
    }
    
    &.result-info {
      background-color: var(--el-fill-color-dark);
    }
  }
}
</style>